import React from 'react';
import { Card, Button, Table, Space, Input, Modal, Form, Select, Switch } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { Option } = Select;
const { Search } = Input;

// 模拟用户数据
interface UserRecord {
  key: string;
  name: string;
  email: string;
  role: string;
  status: boolean;
  createTime: string;
}

const userData: UserRecord[] = [
  { key: '1', name: '管理员', email: 'admin@example.com', role: '超级管理员', status: true, createTime: '2023-01-15' },
  { key: '2', name: '张三', email: 'zhangsan@example.com', role: '普通用户', status: true, createTime: '2023-02-20' },
  { key: '3', name: '李四', email: 'lisi@example.com', role: '普通用户', status: false, createTime: '2023-03-10' },
  { key: '4', name: '王五', email: 'wangwu@example.com', role: '编辑', status: true, createTime: '2023-04-05' },
  { key: '5', name: '赵六', email: 'zhaoliu@example.com', role: '编辑', status: true, createTime: '2023-05-15' },
];

const UserManagement: React.FC = () => {
  // 模态框状态
  const [modalVisible, setModalVisible] = React.useState(false);
  const [currentUser, setCurrentUser] = React.useState<UserRecord | null>(null);
  
  // 表单实例
  const [form] = Form.useForm();

  // 用户表格列
  const columns: ColumnsType<UserRecord> = [
    { title: '用户名', dataIndex: 'name', key: 'name' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    { title: '角色', dataIndex: 'role', key: 'role' },
    { 
      title: '状态', 
      dataIndex: 'status', 
      key: 'status', 
      render: (status: boolean) => (
        <Switch checked={status} disabled />
      )
    },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
    { 
      title: '操作', 
      key: 'action', 
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
          <Button type="link" danger icon={<DeleteOutlined />} disabled={record.role === '超级管理员'}>删除</Button>
        </Space>
      ),
    },
  ];

  // 处理编辑用户
  const handleEdit = (record: UserRecord) => {
    setCurrentUser(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  // 处理添加用户
  const handleAdd = () => {
    setCurrentUser(null);
    form.resetFields();
    setModalVisible(true);
  };

  // 处理搜索
  const handleSearch = (value: string) => {
    console.log('搜索用户:', value);
    // 实际应用中这里会过滤数据
  };

  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>用户管理</h1>
      <Card variant="outlined" extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>添加用户</Button>}>
        <Search
          placeholder="搜索用户"
          allowClear
          style={{ marginBottom: 16, width: 240 }}
          prefix={<SearchOutlined />}
          onSearch={handleSearch}
        />
        <Table 
          columns={columns} 
          dataSource={userData} 
          pagination={{ pageSize: 10 }}
          rowKey="key"
        />
      </Card>
      
      {/* 用户编辑/添加模态框 */}
      <Modal
        title={currentUser ? "编辑用户" : "添加用户"}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={(values) => {
            console.log('用户表单数据:', values);
            setModalVisible(false);
          }}
        >
          <Form.Item name="name" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }]}>
            <Input placeholder="请输入邮箱" />
          </Form.Item>
          <Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
            <Select placeholder="请选择角色">
              <Option value="超级管理员">超级管理员</Option>
              <Option value="管理员">管理员</Option>
              <Option value="编辑">编辑</Option>
              <Option value="普通用户">普通用户</Option>
            </Select>
          </Form.Item>
          <Form.Item name="status" label="状态" valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item>
            <Space style={{ float: 'right' }}>
              <Button onClick={() => setModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit">确定</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default UserManagement;